<template>
  <div class="feedback">
    <navBar :title="title"></navBar>
    <div class="feedback_content">
      <van-field
        type="textarea"
        class="feedback_input"
        v-model="value"
        placeholder="请在此处输入您宝贵的意见…"
      />
      <div class="add_img">
        <div class="add_img_title">添加图片（必填）</div>
        <div class="add_img_upload">
          <div class="fileList" v-for="(item, index) in fileList" :key="index">
            <img class="van_icon" :src="item" />
            <van-icon class="van_icon_delete" name="delete" size="24px" @click="delUploadImg(index)" />
          </div>
          <van-uploader accept="image" :after-read="uploadImg" :before-read="beforeRead">
            <img @click="onClickUploadImg" class="van_icon" src="/img/51.png" />
          </van-uploader>
        </div>
      </div>
      <div class="add_img">
        <div class="add_img_title">姓名（选填）</div>
        <van-field class="name_input" v-model="name" placeholder="请在次数输入您的名字" />
      </div>
      <div class="add_img">
        <div class="add_img_title">联系方式（选填）</div>
        <van-field class="name_input" v-model="link" placeholder="请在次数输入您的手机号" />
      </div>
      <div class="submit_btn" @click="feedback">立即提交</div>
    </div>
  </div>
</template>

<script>
import navBar from "components/navBar";
import { Field, CellGroup, Icon, Uploader, Toast } from "vant";
Vue.use(Field)
  .use(CellGroup)
  .use(Icon)
  .use(Uploader)
  .use(Toast);
export default {
  name: "feedback",
  data() {
    return {
      title: "意见反馈",
      value: "",
      fileList: [],
      name: "",
      link: ""
    };
  },
  components: {
    navBar
  },
  methods: {
    feedback(){
      if(this.value == ''){
        Toast("请填写意见！");
        return;
      }
      if(this.fileList.length <= 0){
        Toast("请上传图片！");
        return;
      }
      var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if(this.link != '' && !phoneReg.test(this.link)){
        Toast("手机号格式错误，请重试！");
        return;
      }
      this.$store.dispatch('feedBack', {
        image: this.fileList.join(","),
        content: this.value,
        name: this.name,
        mobile: this.link,
      }).then(res => {
        console.log('log', res)
        if(res.data.status == 1){
          Toast("反馈成功！");
          this.$router.push({ name: "my"});
        }

      }).catch(err=>{
        Toast("网络错误，请重试！");
      })
    },
    onClickUploadImg(file) {
      console.log(111);
      console.log(file);
    },
    delUploadImg(index){
      this.fileList.splice(index,1);
    },
    uploadImg(file) {
      if(this.fileList.length >= 3){
        Toast("最多传3张图");
        return;
      }
      this.$upload({
          file:file.file
      }).then(res=>{
          if(res.status == 1){
            this.fileList.length < 3 && this.fileList.push(res.result.url);
          }
      }).catch(res=>{
        Toast("网络错误，请重试！");
      })
    },
    beforeRead(file) {
      console.log(file);
      if (file.type !== "image/jpeg" && file.type !== 'image/png') {
        Toast("请上传 jpg 或 png 格式图片");
        return false;
      }
      return true;
    }
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped >
.feedback {
  background-color: #f7f7f7;
  .feedback_content {
    width: 350px;
    margin: 0 auto;
    margin-top: 11px;
    .feedback_input {
      height: 147px;
      border-radius: 5px;
      background-color: #fff;
    }
    .add_img {
      .add_img_title {
        line-height: 37px;
        font-size: 11px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
      .add_img_upload {
        display: flex;
        align-items: center;
        padding-left: 12px;
        height: 105px;
        background: rgba(255, 255, 255, 1);
        border-radius: 5px;
        .van_icon {
          width: 65px;
          height: 65px;
          margin-right: 10px;
        }
        .fileList {
          position: relative;
          float: left;
          .van_icon_delete {
            position: absolute;
            bottom: 8px;
            right: 8px;
          }
        }
      }
      .name_input {
        width: 350px;
        height: 57px;
        background: rgba(255, 255, 255, 1);
        border-radius: 5px;
        display: flex;
        align-items: center;
      }
    }
    .submit_btn {
      margin: 54px auto 20px;
      width: 333px;
      height: 41px;
      line-height: 41px;
      text-align: center;
      background: linear-gradient(
        90deg,
        rgba(1, 47, 64, 1) 0%,
        rgba(1, 47, 64, 1) 100%
      );
      font-size: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
